<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="contentDom">
        <div id="graphDivTabItem1" class="layui-tab-item" style="height: 500px">
            <div style="width: 100%;height: 100%;" id="viewGraph">
            </div>
        </div>
    </div>
</body>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../echarts/js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="../echarts/js/infographic.js" type="text/javascript" charset="utf-8"></script>
<script src="../echarts/js/configuration.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element', 'form', 'table', 'laypage'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage;
        element = layui.element;
        form = layui.form;
        table = layui.table;

        var tableCode = getUrlParams('tableCode')
        var myChart = echarts.init(document.getElementById('viewGraph'));

        $(document).ready(function () {
            makeViewGraph(tableCode);
        })
        function makeViewGraph(tableCode) {
            $.ajax({
                url: BASE_URL + "/sqlManager/mv/getTableName?viewName="+tableCode,
                dataType: 'json',
                contentType:'application/json',
                type: 'get',
                success: function(data) {
                    var data = data.data
                    var len = data.length
                    var linkValue = []
                    var dataValue = []
                    var x = 100;
                    var y = 100;
                    var num = 0;
                    for(var i in data){
                        linkValue.push({
                            source: data[i].mviewName,
                            target: data[i].tableName
                        })
                        if(i != len/2){
                            if(i<len/2){
                                y = y + 200;
                            }else{
                                y = y - 200;
                            }
                        }

                        x = x + 400;
                        num = num + x;
                        dataValue.push({
                            name : data[i].tableName,
                            //value : data.tasks[i].task_name,
                            // y: 0,
                            // x: 600-(120 * data.tasks[i].level),
                            x: x,
                            y: y,
                            // itemStyle:{
                            //     normal:{color: red}
                            // }
                        })
                    }
                    dataValue.push({
                        name : tableCode,
                        x: len%2 == 0? (dataValue[len/2].x+dataValue[len/2-1].x)/2:100+400*(Math.ceil(len/2)),
                        y: 50,
                    })
                    makeViewGraphAjax(dataValue,linkValue)
                    //makeGraphAjax(data);
                },
                error: function(data) {
                }
            });
        }

        function makeViewGraphAjax(dataValue,linkValue){
            myChart.clear();
            var option;

            option = {
                // title: {
                //     text: 'Graph 简单示例'
                // },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        roam: true,
                        label: {
                            show: true
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                        },
                        data: dataValue,
                        // links: [],
                        links: linkValue,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    })


    window.getUrlParams = function (key) {
        //获取url参数
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
        var url = decodeURI(window.location.search)
        var r = url.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
</html>